<template>
	<view>
		<view v-if="!machineId" style="margin-top:200rpx;" class="flex flex-direction align-center">
		    <image src="@/static/logo.png" mode="widthFix" />
		    <button class="cu-btn bg-orange" @tap="scan">
		      <text class="cuIcon-scan"></text>
		      <text class="p-ml-md">扫码购物</text>
		    </button>
		    <!-- <view class="flex justify-center p-mt-xl" style="width:100%;">
		       <text>招商加盟</text>
		       <text class="p-ml-xl">招商加盟</text>
		       <text class="p-ml-xl">招商加盟</text>
		    </view> -->
		</view>
		<view v-if="!!machineId">
			<view class="padding-sm bg-orange light text-center">{{name}}</view>
			<view v-if="!paySuccess&&status==0" class="grid col-3">
			  <view v-for="(item,index) in goodsArr" :key="index" class="goods solid-bottom" :class="index%3==2?'solid-right':''" @tap="buy(item._id)">
				<image :src="item.img" mode="widthFix" />
				<view class="name">{{item.name}}</view>
				<view class="price text-red"><text class="price-icon">¥</text>{{(item.price/100).toFixed(2)}}</view>
			  </view>
			</view>
			<view v-if="!paySuccess&&status!=0" class="cu-chat align-center">
			  <view style="font-size:200rpx;margin-top:200rpx;" class="cuIcon-shop text-gray"></view>
			  <view class="text-gray text-xl margin-xl">停业中。。。</view>
			</view>
			<view v-if="paySuccess" class="flex flex-direction align-center">
				<view style="font-size:200rpx;margin-top:200rpx;" class="cuIcon-roundcheckfill text-orange"></view>
				<view class="text-orange text-xl margin-xl">支付成功，请等待机器出货。。。</view>
				<button class="cu-btn bg-orange lg" @tap="buyAgain">
					<text class="cuIcon-goodsnew"></text>
					<text class="margin-left-xs">继续购物</text>
				</button>
				<button class="cu-btn bg-gray lg" @tap="phone">
					<text class="cuIcon-phone"></text>
					<text class="margin-left-xs">投诉建议</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			machineId:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				paySuccess:false,
				_id:'',
				status:0,
				goodsArr:[],
				name:'',
				phoneNumber:''
			};
		},
		watch: {
			machineId(val) {
				if(!!val&&val!=this.machineId){
					this._getData();
				}
			},
		},
		mounted() {
			//console.log('加载中');
			if(!!this.machineId){
				this._getData();
			}
		},
		methods:{
			_getData(){
				this.$u.wechatHttp.userRequest('/user/machine/get',{_id:this.machineId},(data)=>{
					data.goodsArr.sort((a,b)=>{return b.orderNumber-a.orderNumber;});
					Object.assign(this,data);
					// this._id=data._id;
					// this.status=data.status;
					// this.goodsArr=data.goodsArr;
				});
			},
			buy(goodsId){
				if(!goodsId) return;
				this.$u.wechatHttp.userRequest('/user/machine/buyOne',{machine_id:this._id,goods_id:goodsId},(data)=>{
					console.log(data);
					data.success=(res)=>{
						console.log('支付成功');
						//显示支付成功，等待出货界面
						this.paySuccess=true;
					};
					data.fail=(res)=>{
						console.log('支付失败');
					};
					data.complete=(res)=>{
						console.log('支付完成');
					};
					wx.requestPayment(data);
				});
			},
			buyAgain(){
				this.paySuccess=false;
			},
			scan(){
			    wx.scanCode({
			      scanType:['qrCode'],
			      success(res){
					  console.log(res);
			        if(!!res.path){
						console.log('扫描结果：',res.path);
						uni.reLaunch({
							url: res.path,
						})
			        }
			      }
			    });
			},
			phone(){
				wx.makePhoneCall({
					phoneNumber:this.phoneNumber
				})
			}
		}
	}
</script>

<style lang="scss">
.cu-btn{
  width:60%;
  height:100rpx;
  font-size:50rpx;
  margin-top:100rpx;
}
.goods{
  padding:10rpx;
}
.price{
  text-align:center;
  font-size:40rpx;
  font-weight:bold;
}
.price-icon{
  font-size:30rpx;
  font-weight:normal;
  margin-right:4rpx;
}
.name{
  text-align:center;
  padding:8rpx;
}
</style>
